<template>
    <div class="address-book">
        <van-nav-bar
            title="通讯录"
            left-arrow
            @click-left="backHandler"
            />
        <!-- 搜索框 -->
        <van-search v-model="searchKey" clearable placeholder="请输入单位名称、人员姓名">
            <template slot="right-icon">
                <van-icon name="search" @click="searchHandler" />
            </template>
        </van-search>
        <!-- 列表 -->
        <van-collapse v-model="activeName" accordion @change="getPersonData">
            <van-collapse-item 
                v-for="(it,index) in unitList" 
                :key="index" 
                :name="it.orgId"
                :ref="it.orgId">
                <template slot="title">
                    <div class="unit">{{it.orgName}}</div>
                    <!-- <div class="count">{{item.count}}</div> -->
                </template>
                <div v-if="!personList||!personList.length">暂无人员</div>
                <div v-else class="list-item" v-for="(item,index) in it.personList" :key="index">
                    <div class="p-img">{{item.personnelName.slice(0,1)}}</div>
                    <div class="p-name">{{item.personnelName}}</div>
                    <div class="p-duty">{{item.postName}}</div>
                    <div class="p-tel" @click="telHandler(item.phone)">{{item.phone}}</div>
                </div>
            </van-collapse-item>
        </van-collapse>
    </div>
</template>

<script>
export default {
    name: 'App',
    data(){
        return{
            unitUrl: '/admin/sysOrgInfo/page',
            personUrl: '/admin/sysPersonnelManagement/page',
            searchKey: '',
            activeName: '',
            personList: [ ],
            unitList:[ ]
        }
    },
    created(){
        this.getUnitData()
        console.log(android.getBaseUrl());
    },
    methods:{
        getUnitData(){
            this.axios({
                method: 'get',
                url: this.unitUrl,
                responseType: 'json',
                params:{
                    pageNo: 1,
                    pageSize: 999,
                    orgName: this.searchKey
                }
            }).then((res)=>{
                if(res.data.code!=20000) return this.$toast('请求失败！')
                this.unitList = res.data.data.records
                this.searchPersonData(this.searchKey)
            })
        },
        getPersonData(orgId){// 显示搜索结果
            
            if(orgId == 'search'){
                return this.personList = this.unitList[0].personList
            }
            if(!orgId) return;
            var unit = this.unitList.find((it,i)=>it.orgId==orgId)
            orgId = unit.orgId
            
            this.axios({
                method: 'get',
                url: this.personUrl,
                responseType: 'json',
                params:{
                    pageNo: 1,
                    pageSize: 999,
                    orgId,
                }
            }).then((res)=>{
                if(res.data.code!=20000) return this.$toast('请求失败！')
                unit.personList = res.data.data.records
                this.personList = res.data.data.records
            })
        },
        searchPersonData(personnelName){
            this.axios({
                method: 'get',
                url: this.personUrl,
                responseType: 'json',
                params:{
                    pageNo: 1,
                    pageSize: 999,
                    personnelName
                }
            }).then((res)=>{
                if(res.data.code!=20000) return this.$toast('请求失败！')
                // 搜索触发的
                if(!res.data.data.records.length || !this.searchKey) return ;
                this.unitList.unshift({
                    orgId: 'search',
                    orgName: `“${this.searchKey}”搜索相关人员结果`,
                    personList: res.data.data.records
                })
            })
        },
        searchHandler(){
            this.getUnitData()
        },
        telHandler(tel){
            callBook.callPhone(tel)
        },
        backHandler(){
            android.setFinish()
        }
    }
}
</script>

<style>
.van-nav-bar .van-icon {
    color: #000000!important;
    font-size: 20px!important;
}
.van-search {
    background-color: #eeeeee!important;
}
.van-search .van-search__content {
    height: 30px;
    background-color: #ffffff!important;
    border-radius: 20px;
}
.van-search .van-search__content .van-cell {
    line-height: 24px;
}
.van-field__body .van-field__control::placeholder {
    color: #666666
}
.van-field__left-icon {
    display: none;
}
.van-field__left-icon .van-icon, .van-field__right-icon .van-icon {
    font-size: 20px!important;
    font-weight: 700!important;
    color: #666666!important;
}
.van-collapse-item:last-child {
    border-bottom: 1px solid #eeeeee;
}
.unit {
    float: left;
}
.count {
    float: right;
    margin-right: 14px;
}
.list-item{
    height: 34px;
    line-height: 30px;
    border-bottom: 1px solid #eeeeee;
    color: #666666;
}
.p-img {
    float: left;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    background-color: #0aabe6;
    border-radius: 2px;
    text-align: center;
    line-height: 22px;
    font-size: 24px;
    color: #ffffff;
}
.p-name {
    float: left;
    width: 100px;
    text-align: left;
    overflow: hidden;
}
.p-duty {
    float: left;
    max-width: 100px;
    overflow: hidden;
}
.p-tel {
    float: right;
    color: #0aabe6;
}
</style>
